<template>
  <transition :duration="duration"
      @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter"
      @beforeLeave="beforeLeave" @leave="leave" @afterLeave="afterLeave">
    <slot/>
  </transition>
</template>
<script>
import {createProps} from '@/utils';
import * as animates from './animates';

export default {
  name: 'Animation',
  props: {
    type: createProps(String, 'verticalExpand'),
    duration: createProps(Number, 300),
  },
  methods: {
    beforeEnter(el) {
      this.animate.beforeEnter(el, this.createContext());
    },
    enter(el) {
      this.animate.enter(el, this.createContext());
    },
    afterEnter(el) {
      this.animate.afterEnter(el, this.createContext());
    },

    beforeLeave(el) {
      this.animate.beforeLeave(el, this.createContext());
    },
    leave(el) {
      this.animate.leave(el, this.createContext());
    },
    afterLeave(el) {
      this.animate.afterLeave(el, this.createContext());
    },
    createContext() {
      return {
        duration: this.duration,
        ctx: this
      }
    },
  },
  computed: {
    animate() {
      let res = {};
      try {
        res = animates[this.type] || {};
      } catch (e) {
      }

      funNames.forEach(fun => {
        res[fun] = res[fun] || (() => undefined);
      });
      return res;
    },
  }
};
const funNames = ['beforeEnter', 'enter', 'afterEnter', 'beforeLeave', 'leave', 'afterLeave'];
</script>